<template>
  <div>c:{{ c }}</div>
  <div>cw:{{ cW }}</div>
  <div>d:{{ d }}</div>
  <div>dW:{{ dW }}</div>
  <div>dD:{{ dD }}</div>
  <div>we:{{ we }}</div>
</template>

<script setup>
import { reactive, ref, watch, watchEffect } from 'vue'

// watch 必须监听的是一个proxy
let c = ref(0)
let cW = ref(0)
let d = reactive({ d: 2 })
let dD = ref(0)
let dW = ref(0)
let we = ref(10)
watch(c, value => {
  cW.value = value + 2
})
watch(d, value => {
  console.log(value)
  dW.value = value.d * 42
})
watch(
  () => d.d,
  value => {
    console.log(value)
    dD.value = value * 4
  }
)
let watchcancle = watchEffect(() => {
  we.value = cW.value + dW.value + dD.value
})
// watchcancle() // 取消监听
setTimeout(() => {
  c.value = 10
  d.d = 20
})
defineExpose({ c, d })
</script>

<style lang="scss" scoped></style>
